<!--
 Copyright 2013 The Polymer Authors. All rights reserved.
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
-->
<!--
/**
 * @module Polymer Elements
 */
/**
 * g-sidebar is styled to look like a sidebar.
 *
 * Example:
 *
 *     <g-sidebar label="Google">
 *     </g-ribbon>
 *
 * @class g-sidebar
 */
-->
<polymer-element name="g-sidebar" attributes="label">
  <template>
    <style>
      @host {
        * {
          /*
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-flex-flow: column;
          flex-direction: column;
          */
          background: -webkit-linear-gradient(-60deg, #3d3d3d, #353535);
          background: -moz-linear-gradient(-60deg, #3d3d3d, #353535);
          background: linear-gradient(-60deg, #3d3d3d, #353535);
          box-shadow: inset -5px 0px 8px rgba(0, 0, 0, 0.4);
          color: white;
          font-size: 15px;
          position: relative;
        }
      }
      
      .sidebar-label {
        height: 60px;
        line-height: 60px;
        padding-left: 30px;
        font-size: 21px;
        color: white;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
        cursor: pointer;
      }
      
      .sidebar-content {
        /*
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        position: relative;
        */
        overflow-y: auto;
        position: absolute;
        top: 63px;
        right: 0;
        left: 0;
        bottom: 0;
      }

    </style>
    <div class="sidebar-label">{{label}}</div>
    <div class="sidebar-content">
      <content></content>
    </div>
  </template>
  <script>
    Polymer('g-sidebar', {
      /**
       * Label to put on the top portion of ribbon.
       *
       * @attribute label
       * @type string
       * @default ''
       */
      label: ''
    });
  </script>
</polymer-element>
